<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Link Buttons (YUI Library)</title>

        <!-- Reset and Fonts -->
        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
 
        <!-- CSS for Button -->
        <link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
 
        <!-- Page-specific styles -->
        <style type="text/css">

            body { margin:.5em; }

            h1 { font-weight:bold; }

            h2 { margin:.5em 0; }

            div {

                border:2px groove #ccc;
                margin:.5em;
                padding:.5em;

            }

            #linkbutton2 a,
            #linkbutton5 a {
            
                background:url(img/yahoo.gif) center center no-repeat;
                text-indent:-5em;
                overflow:hidden;
                padding:.25em 1em;

                *margin-left:5em;   /* IE only */
                _padding:.25em 2em; /* IE < 7 only */

            }

            #linkbutton3 a, 
            #linkbutton6 a {

                padding-left:2em;
                background:url(img/yahoo.gif) 10% 50% no-repeat;
            
            }

        </style>

        
        <!-- Dependency source files -->
        <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="../../build/element/element-beta.js"></script>

        <!-- Button source file -->
        <script type="text/javascript" src="../../build/button/button-beta.js"></script>

        <!-- Page-specific JavaScript -->
        <script type="text/javascript">

            YAHOO.example.init = function () {

                // "contentready" event handler for the "linkbuttonsfrommarkup" <div>

                function onLinkButtonsMarkupReady() {
    
                    // Create Buttons from existing markup
            
                    var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
                    var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
                    var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");

                }

                YAHOO.util.Event.onContentReady("linkbuttonsfrommarkup", onLinkButtonsMarkupReady);
    

                // Create Buttons without using existing markup
    
                var oLinkButton4 = new YAHOO.widget.Button({ type:"link", id:"linkbutton4", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
                var oLinkButton5 = new YAHOO.widget.Button({ type:"link", id:"linkbutton5", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });
                var oLinkButton6 = new YAHOO.widget.Button({ type:"link", id:"linkbutton6", label:"Yahoo!", href:"http://www.yahoo.com", container:"linkbuttonsfromjavascript" });

            } ();

        </script>

    </head>
    <body>
    
        <h1>Example: Link Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>

        <div id="example">

            <div id="linkbuttonsfrommarkup">
                <h2>From Markup</h2>
    
                <span id="linkbutton1"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
                <span id="linkbutton2"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
                <span id="linkbutton3"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
    
            </div>
            
            <div id="linkbuttonsfromjavascript">
                <h2>From JavaScript</h2>
            </div>

        </div>

    </body>
</html>